<template>
	<div class="input-scan">
		<input v-model="model" class="text" :style="style" :class="class" />
		<input v-model="model" class="pass" @keyup.enter="keyupEnter" type="password" :style="style" :class="class"
			autocomplete="new-password" />
	</div>
</template>
<script lang="ts" setup>
//扫码输入框,通过把一个透明的密码框放在普通输入框的上面,实现强制转换输入法为英文输入法的效果
//这只是一个例子: 没有使用elementplus
defineOptions({
	name: 'InputScan'
})

const props = defineProps(['style', 'class']) //可以修改输入框样式
const emit = defineEmits(['keyup-enter']) //可以监听回车事件
const model = defineModel({ required: true }) //v-model必填

const keyupEnter = () => {
	emit('keyup-enter', model.value)
}
</script>

<style scoped>
.input-scan {
	position: relative;
}

.text {
	position: absolute;
}

.pass {
	position: absolute;
	z-index: 99;
	background-color: transparent;
	color: transparent;
}
</style>